<template>
	<view class="container">
		<view class="v-form">
			<view class="v-form-item">
				<text>收货人</text>
				<view class="v-form-item-control">
					<input type="text" v-model="datas.AddressInfo.Receiver" class="input-form-item" placeholder="请输入收货人" placeholder-class="input-form-item-holder" />
				</view>
			</view>

			<view class="v-form-item">
				<text>电话</text>
				<view class="v-form-item-control">
					<input type="text" v-model="datas.AddressInfo.Tel" class="input-form-item" placeholder="请输入电话" placeholder-class="input-form-item-holder" />
				</view>
			</view>
			<view class="v-form-item">
				<text>地址</text>
				<view class="v-form-item-control">
					<input type="text" v-model="datas.AddressInfo.Region" class="input-form-item" placeholder="请输入地址" placeholder-class="input-form-item-holder" />
					<!-- 	<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
						<view class="uni-input">{{ multiArray[0][multiIndex[0]].name }}，{{ multiArray[1][multiIndex[1]].name }}，{{ multiArray[2][multiIndex[2]].name }}</view>
					</picker> -->
				</view>
			</view>
			<view class="v-form-item">
				<text>详细地址</text>
				<view class="v-form-item-control-big">
					<textarea  v-model="datas.AddressInfo.AddressDetail" class="input-form-item" placeholder="请输入详细地址" placeholder-class="input-form-item-holder" />
				</view>
			</view>
		</view>
		<view class="v-footer-op">
			<view  class="v-footer-op-left" @click="cancel">取消</view>
			<view  class="v-footer-op-right" @click="save">保存</view>
		</view>

		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
export default {
	data() {
		return {
			messageText: '',
			msgType: 'success',
			duration: 2000,

			datas: {
				AddressInfo: {
					Id: '00000000-0000-0000-0000-000000000000',
					Receiver: '',
					Tel: '',
					Region: '',
					AddressDetail: '',
					CreateTime: ''
				}
			},

			messageText: '',
			msgType: 'success',
			duration: 2000
			// multiIndex: [0, 0, 0],
			// multiArray: [
			// 	[],
			// 	[],
			// 	[]
			// ]
		};
	},
	methods: {
		save: function () {
			let _this = this;

			try {
				if (_this.validForm()) {
					var authToken = authTokenUtil();
					//正式代码
					uni.request({
						url: _this.sysInfo.BasePath + 'Address/AddOrEditAddress',
						method: 'Post',
						data: _this.datas.AddressInfo,
						header: {
							'content-type': 'application/json',
							Authorization: `${authToken}`
						},
						success: (res) => {
							if (res && res.data && res.data.Succeeded === true) {
								uni.navigateBack({
									success: () => {
										// var pages=getCurrentPages();
										// if(pages.length>=2){
										// 	pages[pages.length-2].$vm.init();
										// }
									}
								});
							} else {
								_this.sysUtils.tip({
									sender: _this,

									title: '保存失败！',
									icon: 'error'
								});
							}
						},
						fail: () => {
							_this.sysUtils.tip({
								sender: _this,
								title: '保存失败！',
								icon: 'error'
							});
						},
						complete: () => {}
					});
				}
			} catch (error) {
				// 异常处理逻辑
				_this.sysUtils.tip({
					sender: _this,
					title: '保存失败！',
					icon: 'error'
				});
			}
		},
		cancel: function () {
			uni.navigateBack();
		},
		validForm: function () {
			let _this = this;
			if (!_this.datas.AddressInfo.Receiver) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入收货人',
					icon: 'error'
				});
				return false;
			}
			if (!_this.datas.AddressInfo.Tel) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入电话',
					icon: 'error'
				});
				return false;
			}

			if (!_this.datas.AddressInfo.Region) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请选择地址',
					icon: 'error'
				});
				return false;
			}
			if (!_this.datas.AddressInfo.AddressDetail) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入详细地址',
					icon: 'error'
				});
				return false;
			}
			
			return true;
		},
		init() {
			let _this = this;
			uni.getStorage({
				key: 'CurrentAddress',
				success: (res) => {
					if (res) {
						console.log(res);
						_this.datas.AddressInfo = res.data;
					}
				},
				fail: (error) => {
					console.log(error);
				}
			});
		}
	},
	created() {
		let _this = this;
		validLoginToken(null, () => {
			uni.reLaunch({
				url: "/pages/account/login"
			})
		})
		_this.init();
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	padding: 0rpx;
	margin: 0;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	padding-bottom: 150rpx;
}

.txt-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 50rpx;
	color: #ffffff;
}

.v-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	align-self: stretch;
	margin: 50rpx;
	background-color: #fff;
	border-radius: 32rpx;
}

.v-form-title {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 32rpx;
	font-weight: bold;
}

.v-form-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 20rpx 0;
	border-radius: 50rpx;
	margin-top: 0rpx;
	color: #000;
}

.v-form-item text {
	font-size: 32rpx;
	font-weight: bold;
}

.v-form-item-control {
	display: flex;
	flex-direction: row;
	height: 50rpx;
	align-items: center;
	padding: 20rpx 20rpx;
	border: #d0d0d0 1rpx solid;
	border-radius: 10rpx;
	margin-top: 20rpx;
	color: #000;
	font-size: 26rpx;
}

.v-form-item-control-big {
	display: flex;
	flex-direction: column;
	height: 250rpx;
	align-items: center;
	padding: 20rpx 20rpx;
	border: #d0d0d0 1rpx solid;
	border-radius: 10rpx;
	margin-top: 20rpx;
	color: #000;
	font-size: 26rpx;
}

.v-form-item-control-img {
	margin-top: 32rpx;
	background-color: #fff;
	height: 200rpx;
}

.input-form-item {
	color: #333;
	margin: 0 20rpx;
	font-size: 26rpx;
	flex: 1;
}

.input-form-item-holder {
	color: #999;
	font-size: 26rpx;
}

.btn-from-item {
	margin-top: 35rpx;
	color: #fff !important;
	width: 100%;
	font-size: 32rpx;
	background-color: #466cff !important;
	word-spacing: 20rpx !important;
	border-radius: 50rpx;
}

.btn-form-item-value {
}

::v-deep .uni-label-pointer {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.image-otherlogin {
	height: 80rpx;
	width: 80rpx;
	margin-top: 20rpx;
}

/* #ifdef H5 */
.pop-msg {
	margin-top: -60rpx;
}

/* #endif */
/* #ifdef APP-PLUS */
.pop-msg {
	margin-top: 80rpx;
}

/* #endif */

.v-footer-title {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	color: #989898;
	font-size: 26rpx;
	background-color: #fff;
	letter-spacing: 2rpx;
	z-index: 20;
	align-self: center;
	padding: 0 20rpx;
	margin-top: 50rpx;
}

.v-prefix {
	font-size: 26rpx;
	font-weight: bold;
}

.input-form {
	font-size: 26rpx;
	margin-left: 20rpx;
}

.input-form-item-holder {
	color: #cccccc;
}

.v-footer-op {
	position: fixed;
	z-index: 10001;
	height: 150rpx;
	width: 100%;
	display: flex;
	flex-direction: row;
	bottom: 0;
	border-radius: 10rpx 10rpx 0 0;
	box-shadow: 1rpx 1rpx 20rpx #ccc;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}

.v-footer-op .v-footer-op-left,
.v-footer-op .v-footer-op-right {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	color: white;
}

.v-footer-op-left {
	background-color: #fff;
	width: 30%;
	height: 80rpx;
	border-radius: 50rpx;
	border: 1rpx solid #ce4d0e;
	color: #ce4d0e !important;
}

.v-footer-op-right {
	background-color: #ce4d0e;
	width: 30%;
	height: 80rpx;
	border-radius: 50rpx;
	margin-left: 32rpx;
}
</style>
